import React, {useState, useCallback, useEffect} from "react";
import _ from "lodash";
import {
  Modal,
  Form,
  Select,
  Divider,
  Input,
  InputNumber,
  message,
  Radio,
  Spin,
} from "antd";
import "./index.scss";
import RadarStore from './RadarStore'
import {IModalStatus, ModalText, radarBrand, radarModelItem, radarStatus} from "@/pages/radar/radarManage/interface";
import radarExtendInfoList from './user_data.json'

interface SubRadarProps {
  // type: "create" | "update" | "read";
  type: IModalStatus;
  title: string;
  onOk?: (...args: any[]) => any;
  onCancel?: (...args: any[]) => any;
}

interface IRadarExtendSelectInfo {
  key: string;
  display_name: string;
}

interface IRadarExtendInfo {
  selects: IRadarExtendSelectInfo[];
  display_name: string;
  type: string;
  key: string;
}

const Detail = (props: SubRadarProps) => {
  const [form] = Form.useForm();
  const {onOk, onCancel, title, type} = props;
  const readingMode = type === "read";
  const [showSourceRadarId, setShowSourceRadarId] = useState<boolean>(false);

  const handleClickConfirm = useCallback(() => {
    // form.validateFields().then((values) => {
    //   values.pile_no = Number(values.kilometre) * 1000 + Number(values.baili);
    //   // 处理获取到的表单参数，以符合后端的预期
    //   const submitValues = paramsToQuery(values);
    //   if (Store.Type === "create") {
    //     Store.createRadar(submitValues);
    //   } else if (Store.Type === "update") {
    //     Store.editRadar(submitValues, id);
    //   }
    //   Store.change("id")(0);
    //   Store.change("detail")({});
    //   Store.setParams({});
    //   Store.queryRadarList();
    //   onOk();
    // });
  }, [form, onOk]);

  const handleCancel = useCallback(() => {
    if (onCancel) {
      form.resetFields();
      onCancel();
    }
  }, [onCancel, form]);

  // useEffect(() => {
  //   if (RadarStore.Type === "update") {
  //     setLoading(true);
  //     apiRadarDetail(id).then((res) => {
  //       const detail = Object.create(null);
  //       _.map(queryToData([res.data])[0], (value, key) => {
  //         if (!_.isNil(value)) {
  //           if (key === "model" || key === "status" || key === "brand") {
  //             detail[key] = value.value;
  //           } else {
  //             detail[key] = value;
  //           }
  //         }
  //       });
  //       // 如果返回的雷达字段包含 source_radar_id，渲染雷达映射ID字段
  //       if (detail.source_radar_id && detail.brand === 3) {
  //         setShowSourceRadarId(true);
  //       }
  //       Store.getModel(detail.brand);
  //       form.setFieldsValue({...detail});
  //       setLoading(false);
  //     });
  //   }
  // }, [detail, form, id]);

  //渲染扩展信息里的输入框
  const renderInput = (item: any) => {
    if (item.type === "number") {
      return (
        <Form.Item key={item.key} label={item.display_name} name={item.key}>
          <InputNumber/>
        </Form.Item>
      );
    } else if (item.type === "bool") {
      return (
        <Form.Item key={item.key} label={item.display_name} name={item.key}>
          <Radio.Group>
            <Radio value={true}>true</Radio>
            <Radio value={false}>false</Radio>
          </Radio.Group>
        </Form.Item>
      );
    } else {
      return (
        <Form.Item key={item.key} label={item.display_name} name={item.key}>
          <Input/>
        </Form.Item>
      );
    }
  };

  const renderObject = (item: any) => {
    return (
      <Input.Group compact>
        <span className="inline">K</span>
        <Form.Item name={`kilometre`} style={{display: "inline-block", width: "calc(50% - 20px)"}}>
          <InputNumber style={{width: "100%"}} placeholder="公里桩号"/>
        </Form.Item>
        <span className="inline">+</span>
        <Form.Item name={`baili`} style={{display: "inline-block", width: "calc(50% - 20px)"}}>
          <InputNumber style={{width: "100%"}} placeholder="百米桩号"/>
        </Form.Item>
      </Input.Group>
    );
  };

  //渲染扩展信息里的多选框
  const renderSelect = (item: any) => {
    if (item.type === "multi") {
      return (
        <Form.Item key={item.key} label={item.display_name} name={item.key}>
          <Select mode="multiple" allowClear>
            {item.selects.map((select: IRadarExtendInfo) => (
              <Select.Option key={select.key} value={select.key}>
                {select.display_name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
      )
    } else {
      return (
        <Form.Item key={item.key} label={item.display_name} name={item.key}>
          <Select allowClear>
            {item.selects.map((select: IRadarExtendInfo) => (
              <Select.Option key={select.key} value={select.key}>
                {select.display_name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
      );
    }
  };

  //渲染扩展信息
  const renderExpandExtInfo = () => {
    return (
      <React.Fragment>
        {radarExtendInfoList?.map((item: any) => {
          if (item.selects && item.type !== "object") {
            return renderSelect(item);
          } else if (item.type === "object") {
            return (
              <Form.Item key={item.key} label={item.display_name} name={item.key}>
                {renderObject(item)}
              </Form.Item>
            );
          } else {
            return renderInput(item);
          }
        })}
      </React.Fragment>
    );
  };

  return (
    <Modal
      visible={true}
      className="subRadarComponent"
      title={title}
      onOk={handleClickConfirm}
      onCancel={handleCancel}
      {...ModalText}
    >
      <Form labelCol={{span: 8}} wrapperCol={{span: 12}} form={form}>
        <div className="form-item-wrap">
          <Form.Item label="雷达名称" name="name" rules={[{required: true, message: "请输入雷达名称"}]}>
            <Input disabled={readingMode}/>
          </Form.Item>
          <Form.Item label="所属路段" name="road_section">
            <Input disabled={readingMode}/>
          </Form.Item>
          <Form.Item label="雷达IP" name="ip" rules={[{required: true, message: "请输入雷达IP"}]}>
            <Input disabled={readingMode}/>
          </Form.Item>
          <Form.Item label="雷达端口" name="port" rules={[{required: true, message: "请输入雷达端口"}]}>
            <InputNumber disabled={readingMode}/>
          </Form.Item>
          <Form.Item label="账号" name="account">
            <Input disabled={readingMode}/>
          </Form.Item>
          <Form.Item label="密码" name="password">
            <Input type="password" disabled={readingMode}/>
          </Form.Item>
          <Form.Item label="品牌" name="brand" rules={[{required: true, message: "请选择雷达品牌"}]}>
            <Select
              onChange={(value) => {
                form.setFields([{name: "model", value: ""}]);
                setShowSourceRadarId(value === 3);
              }}
            >
              {_.map(radarBrand, (item) => {
                return (
                  <Select.Option value={item.value}>
                    {item.name}
                  </Select.Option>
                );
              })}
            </Select>
          </Form.Item>
          <Form.Item label="型号" name="model" rules={[{required: true, message: "请选择雷达型号"}]}>
            <Select>
              {_.map(radarModelItem, (item) => {
                return (
                  <Select.Option value={item.value}>
                    {item.name}
                  </Select.Option>
                );
              })}
            </Select>
          </Form.Item>
          {showSourceRadarId && (
            <Form.Item
              label="雷达映射ID"
              name="source_radar_id"
              rules={[{required: true, message: "请输入雷达映射ID"}]}
            >
              <Input disabled={readingMode}/>
            </Form.Item>
          )}
          <Form.Item
            label="链路地址"
            name="link_address"
            rules={[{required: true, message: "请输入链路地址"}]}
          >
            <InputNumber disabled={readingMode}/>
          </Form.Item>
          <Form.Item label="状态" name="status">
            <Select>
              {_.map(radarStatus, (item) => {
                return (
                  <Select.Option value={item.value}>
                    {item.name}
                  </Select.Option>
                );
              })}
            </Select>
          </Form.Item>
          <Form.Item label="探测距离" name="detection_distance">
            <InputNumber disabled={readingMode}/>
          </Form.Item>
          <Form.Item label="车道数" name="lane_numbers">
            <InputNumber disabled={readingMode}/>
          </Form.Item>
          {renderExpandExtInfo()}
        </div>
      </Form>
    </Modal>
  );
};

export default Detail;
